<template>
<div>
 <van-nav-bar
      title="申请列表"
      left-text="返回"
      left-arrow
      :fixed="true"
      :placeholder="true"
      @click-left="$router.back(-1)"
    >
    </van-nav-bar>
  <div class="apply_list">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" style="min-height:100vh">
      <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
        <div class="apply_items" v-for="(value, index) in list" :key="index">
            <div class="apply_text" >
          <div>{{ apply_type[value.apply_type] }}</div>
          <div class="apply_time">{{ value.apply_time }}</div>
          <div :class="apply_state[value.checkapprove_state].color">
            {{ apply_state[value.checkapprove_state].name }}
          </div>
          </div>
          <div class="apply_result" v-show="value.approve_note&&value.checkapprove_state!=1"><span>备注：</span><span>{{value.approve_note}}</span></div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { GetapplyList } from "@/api/user";
export default {
  setup() {
    const data = reactive({
      list: [],
      apply_state: {
        1: { name: "审批中", color: "yellow" },
        2: { name: "申请通过", color: "green" },
        3: { name: "驳回", color: "red" },
      },
      apply_type: { 1: "申请店铺", 2: "店铺资格认证" },
      refreshing:false,
      loading:false,
      finished:false
    });
    const store = useStore();
    const onLoad = async () => {
      const res = await GetapplyList({
        memberid: store.state.userInfo.F_UserId,
      });
      data.refreshing=false;
      data.finished=true;
      if (!res[0]) {
        return;
      }
      data.list = res[1];
    };
    const onRefresh=()=>{
      onLoad();
    }
    return {
      ...toRefs(data),
      onLoad,
      onRefresh
    };
  },
};
</script>
<style lang="scss" scoped>
.apply_list{
    background: #f7f8fa;
}
.apply_items{
    background: #fff;
  border-radius: 1rem;
  margin: 1rem;
  padding: 1rem;
  
  font-size: 1.3rem;
}
.apply_text {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  .apply_time {
    color: #aaa;
  }
}
.apply_result{
      font-size: 1.6rem;
}
.red {
  color: red;
}
.green {
  color: green;
}
.yellow {
  color: #ab8e00;
}
</style>